<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="/common/include/page.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>购物车 - SXT商城</title>
		<%@ include file="/common/include/title.jsp"%>
		<link type="text/css" href="${rootPath }/css/info.css" rel="stylesheet" />
		<script type="text/javascript">
			var timeout	= 500;
			var closetimer	= 0;
			var ddmenuitem	= 0;
			
			$(document).ready(function(){
			   	$('.cat_item').mousemove(function(){
					$(this).addClass('cat_item_on');
				});
				$('.cat_item').mouseleave(function(){	
					$(this).removeClass('cat_item_on');
				});
				$('#slideshow').imgSlideShow({itemclass: 'i'})
				$("#slide-qg").switchTab({titCell: "dt a", trigger: "mouseover", delayTime: 0});
				$("#s_cart_nums1").hover(function(){
					mcancelclosetime();
					if(ddmenuitem) ddmenuitem.hide();
					ddmenuitem = $(document).find("#s_cartbox");
					ddmenuitem.fadeIn();
				},function(){
					mclosetime();
				});
				$("#s_cart_nums2").hover(function(){
					mcancelclosetime();
					if(ddmenuitem) ddmenuitem.hide();
					ddmenuitem = $(document).find("#s_cartbox");
					ddmenuitem.fadeIn();
				},function(){
					mclosetime();
				});
				$("#s_cartbox").hover(function(){
					mcancelclosetime();
				},function(){
					mclosetime();
				});
				 var $cur = 1;
			    var $i = 4;
			    var $len = $('.hot_list>ul>li').length;
			    var $pages = Math.ceil($len / $i);
			    var $w = $('.hotp').width()-66;
				
			    var $showbox = $('.hot_list');
			    
			    var $pre = $('div.left_icon');
			    var $next = $('div.rgt_icon');
			 	
			    $pre.click(function(){
			        if (!$showbox.is(':animated')) { 
			            if ($cur == 1) {   
			                $showbox.animate({
			                    left: '-=' + $w * ($pages - 1)
			                }, 500); 
			                $cur = $pages; 
			            }
			            else { 
			                $showbox.animate({
			                    left: '+=' + $w
			                }, 500); 
			                $cur--;
			            }
			           
			        }
			    });
			
			    $next.click(function(){
			        if (!$showbox.is(':animated')) { 
			            if ($cur == $pages) {  
			                $showbox.animate({
			                    left: 0
			                }, 500); 
			                $cur = 1; 
			            }
			            else {
			                $showbox.animate({
			                    left: '-=' + $w
			                }, 500);
			                $cur++; 
			            }
			            
			        }
			    });
			    
			});
			function mclose()
			{
				if(ddmenuitem) ddmenuitem.hide();
			}
			function mclosetime()
			{
				closetimer = window.setTimeout(mclose, timeout);
			}
			function mcancelclosetime()
			{
				if(closetimer)
				{
					window.clearTimeout(closetimer);
					closetimer = null;
				}
			}
			
			
			/*开始设置全选的按钮，建立全选按钮的步骤主要分为三个方面
			1：获取所有被选择的复选框，可以用$("input[name=ucid]")
			2：获取全选的复选框，可以利用$("#selectCheck").attr("checked")
				要注意如果全选框没有被选中，attr里面的“checked”是没有的
			3：将全选获得的值赋值给被选中的值*/
			function selectAll()
			{
				/* 注意这里检查的是name=ucid 
				这里得到的checks是一组对象*/
				var checks=$("input[name=ucid]");
				/* 因为后面添加了attr，所以得到的是属性，当checkbox被选中的时候，会增加一个属性也就是checked */
				var checkAll=$("#selectCheck").attr("checked");
				alert(checkAll)
				checks.attr("checked",checkAll);
				return true;
			}
			/*提交之前，验证表单，必须提交一件商品*/
			function valiForm()
			{
				/* 因为需要检验每一个复选框，所以需要循环，这里用到了一个each方法 */
				var flag=false;
				$("input=[name=ucid]").each(function()
				{
					if($(this).attr("checked"))	
					{
						flag=true;
						/*注意在这里不能加break，break的作用就是如果有一个被选择了，就不接着往下执行了*/
					}
				});
				if(!flag)
				{
					alert("请选择一件商品");
					return false;
				}
				/*当confirm选择ture时，将会不走这个方法，直接走return true*/
				if(!confirm('确认要提交订单吗??'))
				{
					return false ;
				}
				return true; 
			}
		</script>
	</head>
	
	<body>
		<div id="doc">
			<%@ include file="/common/include/header.jsp" %>
	
			<div id="s_bdw">
				<div id="s_bd">
					<div class="stepflow">
						<img src="${rootPath}/images/step01.gif" width="980" height="32" alt="" />
					</div>
	
					<!-- <div class="addinfo">
						<strong>Coolpad 酷派 N930 GSM/CDMA2000 双模手机 定制机 已添加至购物车。</strong>
						 <a	href="#">返回继续购物</a>
					</div> -->
					
					<!--addinfo end-->
	
					<!-- 显示出某个集合的个数，有两种显示的方式
					1：显示在页面的最上方，这个时候 可以利用标签 ${fn:length(requestScope.usersCarList)}来显示
					2：显示在集合里面，这个时候需要在集合里面设置<c:set value="${totalCount + 1 }" var="totalCount"/>
						最后用 ${totalCount }取出totalCount即可-->
					<%--
						int count = 0 ; 
						for( int i = 0 ; i < 10 ; i ++)
						{
							count = i ;
							count ++ ; 
						}
						System.out.println("---总条数--" + count);
					--%>
					<div class="cartlist">
					<%--在这里主要需要做以下几个步骤
					1：在table上面套一个form表单，用于购物车的提交操作，点击之后跳转到订单提交页面
					2：设置一个全部选择的js操作，当选择全部之后
					3：显示usersList里面的个数，考虑两种方式，第一：显示在最上面，利用fn标签。第二：显示在集合循环完成之后
					4：注意这里的form地址，需要经过拦截器，就算没有登陆在拦截器中也会强制登陆
						不会出现，没有登录就可以提交订单的情况--%>
						<!-- form表单设置了全选的命令，需要检测两个方面
						1：必须选择一个购物车中的商品，可以利用form表单去验证
						2：设置一个全选的按钮，可以得到所有的选择框 -->
						<form action="${rootPath }/head/orders/ordersInsert.htm" method="post"
						 onsubmit="return valiForm()">
							<table width="100%">
								<tr>
									<th><input type="checkbox" id="selectCheck" onclick="return selectAll()"/></th>
									<th>购物车中的商品</th>
									<th>易迅价</th>
									<th>返现</th>
									<th>购买数量</th>
									<th>发货时间</th>
									<th>操作</th>
								</tr>
								<%--
									int count = 0 ; 
									for( int i = 0 ; i < 10 ; i ++)
									{
										count = i ;
										count ++ ; 
									}
									System.out.println("---总条数--" + count);
								--%>
								<c:set value="0" var="totalCount"/>
								<c:forEach items="${requestScope.usersCarList }" var="usersCar" varStatus="stat">
									<!-- 数量+1 -->
									<%-- <c:set value="${stat.count }" var="totalCount"/> --%>
									<c:set value="${totalCount + 1 }" var="totalCount"/>
									<!-- 制作斑马线的时候，可以利用%
									bgcolor="${stat.count % 2 == 0 ? '#fffaf1' : '' }来设置成斑马线 -->
									<tr bgcolor="${stat.count % 2 == 0 ? '#fffaf1' : '' }">
										<td>
											<input type="checkbox" name="ucid" value="${usersCar.id}"/>
										</td>
										<td>
											<a href="#"> 
												<img class="smallpic" src="images/12sdfv.jpg" width="80" height="80" />
											</a>
											<a href="#">${usersCar.goods.name }</a>
										</td>
										<%--
											123,456,789.12
											0:自动补全
											#
										 --%>
										<td><strong class="red">￥<fmt:formatNumber value="${usersCar.goods.price }" pattern="#,###.#"/></strong></td>
										<td>￥0.00</td>
										<td>
											<div class="addinput">
												<input type="text" name="qty_item_1" value="${usersCar.num }" id="qty_item_1"
													onKeyUp="setAmount.modify('#qty_item_1')" class="stext" />
												<a class="add" onClick="setAmount.add('#qty_item_1')"
													href="javascript:void(0)">
												</a>
												<a class="reduce" onClick="setAmount.reduce('#qty_item_1')"
													href="javascript:void(0)"></a>
											</div>
										</td>
										<td>有货，可当日出货</td>
										<td><a href="#" class="blue">移入收藏夹</a><br />
										<a href="#" class="blue">删除</a></td>
									</tr>
								</c:forEach>
								<tr>
									<td valign="top" colspan="2"><a href="#"><img
											src="images/deleteicon.gif" /> 清空购物车</a></td>
									<td align="right" colspan="5">
										<p>共 ${totalCount }  件商品，总重3.580kg</p>
										<p style="margin-top: 10px; font-size: 14px;">
											总计金额(不含运费)：￥2206.00(商品金额) - ￥0.00(返现金额)= <strong
												style="font-size: 18px; color: #d80000;">￥2206.00</strong>
										</p>
									</td>
								</tr>
								<tr>
									<td style="border: none; padding-top: 20px;" colspan="7">
										<input type="submit" value="" id="" class="btnimg f-r" />
										<a class="f-r goonbtn" href="#">
											<img src="images/gooncat.gif" width="86" height="24" alt="" />
										</a>
									</td>
								</tr>
							</table>
						</form>
					</div>
					<!--cartlist end-->
	
					<script type="text/javascript">
				/* reduce_add */
				var setAmount = {
					min:1,
					max:999,
					reg:function(x) {
						return new RegExp("^[1-9]\\d*$").test(x);
					},
					amount:function(obj, mode) {
						var x = $(obj).val();
						if (this.reg(x)) {
							if (mode) {
								x++;
							} else {
								x--;
							}
						} else {
							alert("请输入正确的数量！");
							$(obj).val(1);
							$(obj).focus();
						}
						return x;
					},
					reduce:function(obj) {
						var x = this.amount(obj, false);
						if (x >= this.min) {
							$(obj).val(x);
						} else {
							alert("商品数量最少为" + this.min);
							$(obj).val(1);
							$(obj).focus();
						}
					},
					add:function(obj) {
						var x = this.amount(obj, true);
						if (x <= this.max) {
							$(obj).val(x);
						} else {
							alert("商品数量最多为" + this.max);
							$(obj).val(999);
							$(obj).focus();
						}
					},
					modify:function(obj) {
						var x = $(obj).val();
						if (x < this.min || x > this.max || !this.reg(x)) {
							alert("请输入正确的数量！");
							$(obj).val(1);
							$(obj).focus();
						}
					}
				}
				</script>
	
				</div>
				<!--s_bd end-->
			</div>
			<!--s_bdw end-->
	
			<%@ include file="/common/include/footer.jsp" %>
		</div>
	</body>
</html>